<template>
  <section>
    <aside>
      <ul>
        <li :class="{active:mode===0}" @click="getData(0)"><span class="el-icon-remove-outline mr5"></span>待处理</li>
        <li :class="{active:mode===1}" @click="getData(1)"><span class="el-icon-video-play mr5"></span>进行中</li>
        <li :class="{active:mode===2}" @click="getData(2)"><span class="el-icon-circle-check mr5"></span>已完成</li>
      </ul>
    </aside>
    <div class="container">




    </div>


    <div class="container" style="display: none">








      <div class="top" style="display: none">
        <div class="left">
          <div class="item" @click="getData(0)">
            <output>{{identityId==='3'?countData['sharePending']:countData['handlePending']}}</output>
            <label>待处理</label>
          </div>
          <div class="item" @click="getData(1)">
            <output>{{identityId==='3'?countData['shareOverTime']:countData['handleOverTime']}}</output>
            <label>已超时</label>
          </div>
          <div class="item" @click="getData(2)">
            <output>{{identityId==='3'?countData['shareProgress']:countData['handleProgress']}}</output>
            <label>进行中</label>
          </div>
          <div class="item" @click="getData(3)">
            <output>{{countData['finish']}}</output>
            <label>已完结</label>
          </div>
        </div>
        <div class="right">
          <div class="item" v-for="(item,idx) in countData['eventList']" :key="idx"
               :style="{width:parseInt(100/countData['eventList'].length)+'%'}" @click="getData(item.code)">
            <RingChart :data="{value:item['eventCount'],percent:parseFloat(item['eventRate'])}"
                       :cfg="chartCfg(item.code)"></RingChart>
            <span>{{evtName(item.value)}}</span>
          </div>
        </div>
      </div>
      <div class="bottom" style="display: none">
        <div class="options">
          <el-form :inline="true" :model="options" class="bottom-border" ref="optionForm">
            <el-form-item label="摄像机" prop="cameraName">
              <el-input v-model="options.cameraName" clearable placeholder="可搜索路段、位置、摄像机" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="事件类型" prop="eventTypeTwoCode">
              <el-select v-model="options.eventTypeTwoCode" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in evtOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事件状态" prop="eventTypeTwoCode">
              <el-select v-model="options.eventState" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in evtStateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="identityId==='3'?'发布部门':'发布部门'">
              <el-select v-model="options.dispatcher" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in this.orgData['base']"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="identityId==='3'?'发布时间':'指派时间'">
              <el-date-picker
                v-model="options.timeSpace"
                type="daterange"
                align="right"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getData">搜索</el-button>
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>

        </div>
        <div class="table">
          <ul v-if="orderList.length>0">
            <li v-for="(item,index) in orderList">
              <!--              <el-form>-->
              <!--                <el-form-item>-->
              <!--                  <el-button size="small" type="primary" @click="uploadImg">点击上传</el-button>-->
              <!--                </el-form-item>-->
              <!--              </el-form>-->


              <!--              <div>-->
              <!--                <input type="file" id="aaaa"><button @click="uploadImg(item)">啊啊啊</button>-->
              <!--              </div>-->
              <div class="header">
                <div class="item">
                <span class="road">
                  <span class="el-icon-map-location"></span>
                  {{evtName(item['cameraName'])}}
                </span>
                </div>
                <div class="item">
                <span class="time">
                  {{item['detectedTime']}}
                </span>
                </div>
                <div class="item" style="margin-left: auto;">
                  <el-button type="primary" plain size="mini" @click="sentOrder(item)" v-if="evtState(item)==='派单'">派单
                  </el-button>
                  <el-button type="primary" plain size="mini" @click="Order(item)" v-if="evtState(item)==='撤回'">撤回
                  </el-button>
                  <el-button type="primary" plain size="mini" @click="returnOrder(item)" v-if="evtState(item)==='退回'">退回
                  </el-button>
                  <el-button type="primary" plain size="mini" @click="startOrder(item)" v-if="evtState(item)==='开始'">开始
                  </el-button>
                  <el-button type="primary" plain size="mini" @click="endOrder(item)" v-if="evtState(item)==='退回'">结束
                  </el-button>
                </div>
              </div>
              <div class="body">
                <div class="item">
                <span class="name"
                      :style="{borderColor:evtColor(item['eventTypeTwoCode']),color:evtColor(item['eventTypeTwoCode'])}">
                  {{evtName(item['eventInfoState'])}}
                </span>
                </div>
                <div class="item">
                  <output>{{item['road']}}</output>
                  <label>路段</label>
                </div>
                <div class="item">
                  <output>{{evtPos(item['cameraName']) || '&nbsp;'}}</output>
                  <label>事件位置</label>
                </div>

                <div class="item aling-left w200" v-if="identityId==='3'">
                  <div><label>发布部门：</label>
                    <output>{{orgName(item['department'])}}</output>
                  </div>
                  <div><label>发布时间：</label>
                    <output>{{item['expectTime']}}</output>
                  </div>
                  <div><label>时限：</label>
                    <output>{{item['expectTimeNum']}}分钟</output>
                  </div>
                  <div><label>状态：</label>
                    <output>{{item['expectTime']}}</output>
                  </div>
                </div>

                <div class="item aling-left w200" v-if="identityId==='3'">

                </div>


                <div class="item aling-left w250">
                  <div><label>处理开始时间：</label>
                    <output>{{item['handleStartTime']}}</output>
                  </div>
                  <div><label>处理结束时间：</label>
                    <output>{{item['handleEndTime']}}</output>
                  </div>
                </div>
                <div class="item aling-left">
                  <div><label>时限：</label>
                    <output>{{item['expectTimeNum']}}分钟</output>
                  </div>
                  <div><label>状态：</label>
                    <output>{{handleState(item['expectTime'],item['expectTimeNum'])}}</output>
                  </div>

                </div>
                <div class="item">
                  <output><span class="el-icon-camera"></span></output>
                  <label>事件图片</label>
                </div>
                <div class="item">
                  <output><span class="el-icon-video-camera"></span></output>
                  <label>事件视频</label>
                </div>
                <div class="item">
                  <output><span class="el-icon-monitor"></span></output>
                  <label>即时视频</label>
                </div>

                <div class="item">
                  <output><span class="el-icon-chat-line-round"></span></output>
                  <label>备注</label>
                </div>
              </div>
            </li>


          </ul>
          <div class="isNull" v-else>
            查询结果为空！
          </div>

          <Dialog :cfg="dialogCfg" ref="dialog">
            <!--            <el-form ref="fun1Form" label-width="120px" label-position="top" class="eventInfoBox">-->
            <!--              <el-form-item label="事件信息：">-->
            <!--                <div class="eventInfo">-->
            <!--                  <div>-->
            <!--                    <label>位置：</label>-->
            <!--                    <output>{{dialogData.cameraName}}</output>-->
            <!--                  </div>-->
            <!--                  <div>-->
            <!--                    <label>类型：</label>-->
            <!--                    <output>{{dialogData.eventInfoState}}</output>-->
            <!--                  </div>-->
            <!--                  <div>-->
            <!--                    <label>时间：</label>-->
            <!--                    <output>{{dialogData.detectedTime}}</output>-->
            <!--                  </div>-->
            <!--                </div>-->

            <!--              </el-form-item>-->
            <!--              <el-form-item label="处理结果：" class="eventInfoBox">-->
            <!--                <el-input v-model="dialogData.fbNote" placeholder="请输入处理结果内容" size="mini"></el-input>-->
            <!--              </el-form-item>-->

            <!--              <el-form-item label="反馈图片：">-->
            <!--&lt;!&ndash;                <el-button size="small"  @click="beforeUpload">点击上传</el-button>&ndash;&gt;-->
            <!--              </el-form-item>-->
            <!--            </el-form>-->


            <el-form ref="fun1Form" label-width="120px" label-position="top" class="eventInfoBox">
              <el-form-item label="事件信息：">
                <div class="eventInfo">
                  <div>
                    <label>位置：</label>
                    <output>{{dialogData.cameraName}}</output>
                  </div>
                  <div>
                    <label>类型：</label>
                    <output>{{dialogData.eventInfoState}}</output>
                  </div>
                  <div>
                    <label>时间：</label>
                    <output>{{dialogData.detectedTime}}</output>
                  </div>
                </div>

              </el-form-item>
              <el-form-item label="处理部门：" class="eventInfoBox">
                <el-select v-model="dialogData.dispatcher" placeholder="请选择部门" size="mini" style="width: 100%">
                  <el-option
                    v-for="item in orgData.center"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="处理时限：">
                <el-select
                  size="mini"
                  v-model="dialogData.timeSpace"
                  filterable
                  default-first-option
                  placeholder="请选择处理时限">
                  <el-option
                    v-for="item in timeSpaces"
                    :key="item"
                    :label="item+'分钟'"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="备注：">
                <el-input v-model="dialogData.fbNote" placeholder="请输入备注内容" size="mini"></el-input>
              </el-form-item>
            </el-form>


          </Dialog>


        </div>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="options.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="options.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </section>
</template>

<script>

  import moment from 'moment';

  moment.locale('zh-cn', {
    weekdays: '日,一,二,三,四,五,六'.split(',').map(item => '星期' + item)
  });
  import RingChart from 'kkui/echarts/RingChart';

  import Dialog from 'comp/common/Dialog.vue';

  export default {
    name: "HandleList",
    components: {
      RingChart,
      Dialog
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        user: this.$kkui.cache.get('user'),

        mode:0,



        orderList: [],
        countData: {},
        orgData: {},

        options: {
          timeSpace: [],
          cameraName: '',
          eventState: '',
          startTime: '',
          endTime: '',
          eventTypeTwoCode: '',
          dispatcher: '',
          page: 1,
          limit: 10,
          total: 0

        },
        evtOptions: [],
        evtStateOptions: [
          {
            value: 0,
            label: '待处理'
          },
          {
            value: 1,
            label: '已超时'
          },
          {
            value: 2,
            label: '进行中'
          },
          {
            value: 3,
            label: '已完结'
          }
        ],


        ringChartCfg: {
          unit: '件',
          itemColor: '#E0E0E0',
          ringColor: '',
          bigFontSize: 14,
          smallFontSize: 12,
          legendShow: false
        },


        dialogCfg: {
          width: 600,
          height: 400,
          title: '',
          closeShow: !!1,
          footerShow: !!1,
          submit: () => {
          }
        },

        dialogData: {
          dispatcher: '',
          fbNote: '',
          timeSpace: 0
        },
        timeSpaces:WebCfg['timeSpaces']
      }
    },
    computed: {
      identityId: function () {
        return this.user.identityId
      },
      evtName() {
        return (name) => {
          name = name.replace(/[u4e00-u9fa5|+|-|_]/ig, ' ');
          return name.indexOf('-') > -1 ? name.split('-')[1] : name
        }
      },
      evtPos() {
        return (pos) => {
          let _pos = pos.replace(/[\u4e00-\u9fa5]/ig, '').replace(/\(.*\)/, '');
          if (_pos.indexOf(' ') > -1) _pos = _pos.split(' ')[1];
          if (_pos.indexOf('_') > -1) _pos = _pos.split('_')[1];
          return _pos;
        }
      },
      handleState() {
        return (state, time, limit) => {
          if (state === '3') {

          } else if (state === '4') {

          }

          const s = new Date(time).getTime() + limit * 3600 * 1000 - new Date().getTime();
          return s >= 3600 * 1000 ? '正常' : (s <= 0 ? '已超时' : '即将超时')
        }
      },
      evtState: () => {
        return (item) => {
          let txt = '';
          if (item.state === 3) {
            if (item.dispatcher) {

            }
          }


          return '派单'
        }
      },
      evtColor: function () {
        return function (code) {
          return {
            "002-009-002": '#EA6666',
            "002-010-005": '#FAC858',
            "002-005": '#5470C6',
            "002-007-002": '#3BB36E',
            "002-005-006": '#3FA3DC',
            "001-005": '#C280DC',
            "001-001-001": '#FC8452'
          }[code]
        }
      },

      chartCfg: function () {
        return function (code) {
          return {
            ...this.ringChartCfg, ...{
              leftRingColor: '#e0e0e0',
              ringColor: this.evtColor(code),
              ringSize: ["70%", "88%"],
              ringSize2: ["90%", "94%"],
              outRingColor: '#e0e0e0',
              bigColor: this.evtColor(code),
              smallColor: '#404040',
              position: ['50%', '50%']
            }
          }
        }
      },
      orderIndex() {
        return (index) => {
          return (this.options.page - 1) * this.options.limit + index + 1
        }
      },
      orgName: function () {
        return (code) => {
          return this.orgData['base'].filter(item => item.id === code)[0]['name']
        }
      }
    },
    mounted() {
      this.$kkui.loading_deepBlue.hide();
      let _events = this.$kkui.cache.get('dict')['event'];
      for (let value in _events) {
        if (value !== '-1') {
          const _name = _events[value];
          this.evtOptions.push({
            value,
            label: _name.indexOf('-') > -1 ? _name.split('-')[1] : _name
          })
        }

      }
      _events = null;


      this.getData();
      this.getCount();
      this.getOrgData();
    },
    methods: {
      formatTime(time) {
        return moment(time).format('YYYY-MM-DD 00:00:00')
      },
      getData(num) {
        if (typeof num === "number") {
          this.options.eventState = num;
        }
        if (typeof num === "string") {
          this.options.eventTypeTwoCode = num;
        }
        if (this.options.timeSpace.length === 2) {
          this.options.startTime = this.formatTime(this.options.timeSpace[0]);
          this.options.endTime = this.formatTime(this.options.timeSpace[1]);
        }
        const cfg = {
          ...this.options
        };
        delete cfg.timeSpace;

        if (this.identityId === '3') cfg['distribution'] = this.user.departmentId;
        if (this.identityId === '4') cfg['handle'] = this.user.departmentId;
        this.$server('handle.list', cfg).then(data => {
          this.orderList = data.rows;
          this.options.total = data.total;
        })
      },
      getCount() {
        const cfg = {};
        if (this.identityId === '3') cfg['distribution'] = this.user.departmentId;
        if (this.identityId === '4') cfg['handle'] = this.user.departmentId;
        this.$server('handle.count', cfg).then(data => {
          this.countData = data;
        })
      },

      getOrgData() {
        this.$server('org.list').then(data => {
          let orgData = {center: [], base: []};
          data.forEach(item => {
            if (item.name === '各分中心') {
              orgData.center = item.children;
            } else {
              orgData.base = orgData.base.concat(item.children)
            }
          });
          this.orgData = orgData;
          console.log(this.orgData);
        })
      },

      reset() {
        this.options = {
          ...this.options, ...{
            cameraName: '',
            eventState: '',
            startTime: '',
            endTime: '',
            eventTypeTwoCode: '',
            dispatcher: '',
            page: 1,
            timeSpace: []
          }
        };
        this.getData();
      },

      sentOrder(item) {
        console.log(item);
        this.dialogData = {
          ...this.dialogData,
          ...item
        };

        this.$refs.dialog.show = true;
        this.dialogCfg.width = 600;
        this.dialogCfg.height = 380;
        this.dialogCfg.title = '派单';
        this.dialogCfg.submit = () => {


        }


        // this.$server('handle.sendOrder', {
        //   id: item.id,
        //   dispatcher: this.user.departmentId * 1,
        //   handle: 8,
        //   expectTimeTwoNum: 12
        // }).then(data => {
        //   console.log(data);
        //   this.orderList = data.rows;
        // })
      },
      returnOrder(item) {

        this.$server('handle.returnOrder', {
          id: 42,
          returnNote: '24342332'
        }).then(data => {
          console.log(data);

        })
      },
      startOrder(item) {


        this.$server('handle.startOrder', {
          id: item.id,

        }).then(data => {
          console.log(data);

        })
      },
      endOrder(item) {

        this.$server('handle.endOrder', {
          id: item.id,
          result: '321233232'
        }).then(data => {
          console.log(data);

        })
      },
      uploadImg(item) {

        this.$kkui.submit({
          title: '上传电子档案',
          file: !!1
        }, (file) => {
          // const dom = document.querySelector('#aaaa');
          var formData = new FormData();
          formData.append('file', file);
          this.$server('handle.uploadImg', formData).then(data => {

          })
        });


        // try {
        //   let formData = new FormData();
        //   formData.append('file', file);
        //
        // } catch (e) {
        //   throw e;
        // }


        // const dom = document.querySelector('#aaaa');
        // var formData = new FormData();
        //
        // console.log(dom.files[0]);
        // formData.append('file', dom.files[0]);
        // console.log(formData.entries(),1111);
        // this.$server('handle.uploadImg', {
        //   id: item.id || 'dfdafa',
        //   file: formData
        // }).then(data => {
        //   console.log(data);
        //
        // })
      },

      handleSizeChange(val) {
        this.options.limit = val;
        this.getData();

      },
      handleCurrentChange(val) {
        this.options.page = val;
        this.getData();
      }

    }
  }
</script>

<style scoped lang="scss">
  @import "~css/system.scss";





























  section {

    .container {
      height: 100%;
      padding: 0 !important;
      display: flex;
      flex-direction: column;


      > .top {
        height: 120px;
        padding: 16px;
        display: flex;
        background-color: #f0f0f0;

        > .left {
          width: 40%;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 40px;

          .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            cursor: pointer;

            output {
              font-size: 34px;
              font-weight: 600;
              font-family: 'tapeworm', serif;
            }

            label {
              height: 30px;
              line-height: 30px;
              color: #828282;
              font-size: 18px;
              font-weight: 700;
              cursor: pointer;
            }

            &:first-child {
              output {
                color: #E6A23C
              }
            }

            &:nth-child(2) {
              output {
                color: #F56C6C
              }
            }

            &:nth-child(3) {
              output {
                color: #5CB87A
              }
            }

            &:last-child {
              output {
                color: #909399;
              }
            }
          }
        }

        > .right {
          width: 60%;
          display: flex;
          justify-content: space-between;

          .item {
            padding: 5px 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor: pointer;

            > span {
              font-weight: 600;
              color: #404040;
              font-size: 14px;
            }
          }
        }
      }

      > .bottom {
        flex: 1;
        border-top: 4px solid rgba(9, 14, 36, .6);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #fff;

        .options {
          height: 40px;
          line-height: 40px;
          padding: 8px 16px;
          margin-bottom: 16px;
          border-bottom: 1px solid rgba(9, 14, 36, .05);

        }


        .table {
          flex: 1;
          overflow-y: auto;
          padding: 0 16px;

          .isNull {
            text-align: center;
            line-height: 150px;
            color: #999;
            font-size: 14px;
          }

          li {
            margin-bottom: 16px;
            border: 1px solid rgba(9, 14, 36, .07);

            .header {
              height: 32px;
              background-color: rgba(9, 14, 36, .05);
              padding: 4px 12px;
              display: flex;
              align-items: center;
              font-size: 14px;
              gap: 10px;

              .item {
                .name {
                  display: inline-block;
                  min-width: 80px;
                  border: 2px solid rgb(0, 160, 210);
                  padding: 3px 0;
                  border-radius: 3px;
                  text-align: center;
                  font-weight: 600;
                }

                .road {
                  font-weight: 600;
                }

                .time {
                  color: #828282;
                }
              }
            }

            &:hover {
              border-color: rgba(9, 14, 36, .2);
            }

            .body {
              display: flex;
              justify-content: space-between;
              padding: 12px;

              .item {
                display: flex;
                text-align: center;
                flex-direction: column;
                justify-content: center;
                min-width: 100px;

                &.aling-left {
                  text-align: left;
                }

                &.w200 {
                  width: 200px;
                }

                &.w250 {
                  width: 250px;
                }

                .name {
                  border: 2px solid #fff;
                  padding: 3px 0;
                }

                output {
                  color: #4f4f4f;
                  font-size: 14px;

                  span {
                    font-size: 24px;
                    cursor: pointer;
                  }
                }

                label {
                  color: #828282;
                  font-size: 12px;
                }

              }
            }


          }
        }

        .page {
          height: 32px;
          padding: 8px;
          text-align: center;

          border-top: 1px solid rgba(9, 14, 36, .3);
        }


      }


    }
  }
</style>
<style lang="scss" scoped>
  .eventInfoBox {
    padding: 0 5px;
  }

  .eventInfo {
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*line-height: 24px;*/
    line-height: 24px;

    label {
      color: #828282;
      margin-left: 28px;
    }

    output {
      color: #404040
    }

    span {
      width: 30%;
      display: inline-block;
      overflow: hidden;

    }

    span:last-child {
      width: 40%;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }


  /deep/ .el-form .el-form-item:last-child {
    margin-bottom: 0;
  }


  /deep/ .el-form-item {
    margin-bottom: 10px;
  }

  /deep/ .eventInfoBox2 .el-form-item__content {
    display: flex;
  }

  /deep/ .eventInfoBox .el-form-item__label {
    width: 100%;
    line-height: 24px;
    padding: 0;
  }
</style>
